<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>HTML5图片修饰</title>
  <script type="text/javascript" src="http://lufylegend.com/js/lufylegend-1.10.1.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=0.65,minimum-scale=0.65, maximum-scale=0.65, user-scalable=yes">
  <style type="text/css" media="screen">
  body{margin:0;padding:0;}
  #legend{border:2px solid red;position: absolute;left:80px;top:80px;width:400px;height:400px;z-index:1;}
</style>
</head>
<body>
  <div id="legend"></div>
  <canvas id="coordinateCanvas" width="1000" height="1000"></canvas>
</body>
<script>
init(30,"legend",400,400,main);
var vertices;
var indices;
var uvtData;
var stageLayer,backLayer;
var bitmapData;
var imgData = [
  {name:"pikaqiu",path:"./img/pikaqiu.png"}
];
var imglist;
var pointList=[];
var mouseX,mouseY;
var mouseObj,toHidden;
function main(){
  LLoadManage.load(imgData,null,gameInit);
}
function gameInit(result){
  LGlobal.preventDefault = false;
  imglist = result;
  bitmapData = new LBitmapData(imglist["pikaqiu"]);
  
  stageLayer = new LSprite();
  //stageLayer.graphics.drawRect(1,"#000000",[0,0,LGlobal.width,LGlobal.height],true,"#000000");
  addChild(stageLayer);
  
  backLayer = new LSprite();
  backLayer.x = 50;
  backLayer.y = 50;
  stageLayer.addChild(backLayer);
  LGlobal.setDebug(true);
  cut();
  stageLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
  stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN,down);
  stageLayer.addEventListener(LMouseEvent.MOUSE_UP,up);
  stageLayer.addEventListener(LMouseEvent.MOUSE_MOVE,move);
} 
function pointHidden(){
  if (toHidden != "hidden") {
    toHidden = "hidden";
  }else{
    toHidden = "";
  }
  for(i = 0;i < pointList.length;i++){
    obj = pointList[i];
    if (toHidden == "hidden") {
      obj.alpha = 0;
    }else{
      obj.alpha = 1;
    }
  }
}
function cut(){
  backLayer.removeAllChild();
  var num = 2;
  var width = 300 / num;
  var height = 300 / num;
  var i,j,obj;
  vertices = new Array();
  for(i=0;i<=num;i++){
    for(j=0;j<=num;j++){
      vertices.push(i*height,j*width);
    }
  }
  pointList = new Array();
  for(i = 0;i < vertices.length;i+=2){
    obj = new LSprite();
    obj.x = vertices[i];
    obj.y = vertices[i+1];
    obj.graphics.drawArc(1,"#0610f8",[0,0,12,0,2*Math.PI],true,"#0610f8");
    backLayer.addChild(obj);
    pointList.push(obj);
  }
  indices = new Array();
  for(i=0;i<num;i++){
    for(j=0;j<num;j++){
      indices.push(i*(num+1)+j,(i+1)*(num+1)+j,i*(num+1)+j+1);
      indices.push((i+1)*(num+1)+j,i*(num+1)+j+1,(i+1)*(num+1)+j+1);
    }
  }
  uvtData = new Array();
  for(i=0;i<=num;i++){
    for(j=0;j<=num;j++){
      uvtData.push(i/num, j/num);
    }
  }
  backLayer.graphics.clear();
  backLayer.graphics.beginBitmapFill(bitmapData);
  backLayer.graphics.drawTriangles(vertices, indices, uvtData);
}
function onframe(){
  if (toHidden == "hidden")return;
  var i,obj;
  for(i = 0;i < pointList.length;i++){
    obj = pointList[i];
    obj.alpha = 1;
    if(Math.pow(obj.x-mouseX,2)+Math.pow(obj.y-mouseY,2) < Math.pow(20,2)){
      obj.alpha = 0.5;
    }
  }
}
function down(event){
  if(mouseObj)return;
  mouseX = event.offsetX - backLayer.x;
  mouseY = event.offsetY - backLayer.y;
  var i,obj;
  for(i = 0;i < pointList.length;i++){
    obj = pointList[i];
    if(Math.pow(obj.x-mouseX,2)+Math.pow(obj.y-mouseY,2) < Math.pow(20,2)){
      mouseObj = obj;
      mouseObj.index = i*2;
      mouseObj.mouseX = mouseX;
      mouseObj.mouseY = mouseY;
      mouseObj.saveX = mouseObj.x;
      mouseObj.saveY = mouseObj.y;
      break;
    }
  }
  
}
function up(event){
  mouseObj = null;
}
function move(event){
  mouseX = event.offsetX - backLayer.x;
  mouseY = event.offsetY - backLayer.y;
  if(mouseObj){
    mouseObj.x = mouseX - mouseObj.mouseX + mouseObj.saveX;
    mouseObj.y = mouseY - mouseObj.mouseY + mouseObj.saveY;
    vertices[mouseObj.index] = mouseObj.x;
    vertices[mouseObj.index + 1] = mouseObj.y;
  }
}
var coordinateCanvas=document.getElementById("coordinateCanvas");
var coordinateCtx=coordinateCanvas.getContext("2d");
function coordinateSystem(){//画坐标轴
  coordinateCtx.translate(80, 80);
  coordinateCtx.lineWidth = 1;
  coordinateCtx.strokeStyle = 'rgba(81, 195, 50, 0.1)';
  coordinateCtx.font = "10px Arial";
  coordinateCtx.textAlign = "center";
  coordinateCtx.fillStyle = "rgba(0, 0, 0, 0.5)";
  var ca = 40,len = 100;
  for (var i = -len; i < len; i++) {
    var l = 0;
    if(i === 0){
      l = 0;
      coordinateCtx.lineWidth = 2;
      coordinateCtx.strokeStyle = 'rgba(255, 246, 148, 0.5)';
    }
    coordinateCtx.beginPath();
    coordinateCtx.moveTo(i*ca+l,-ca*len+l);
    coordinateCtx.lineTo(i*ca+l,ca*len+l);
    coordinateCtx.stroke();
    coordinateCtx.beginPath();
    coordinateCtx.moveTo(-ca*len+l,i*ca+l);
    coordinateCtx.lineTo(ca*len+l,i*ca+l);
    coordinateCtx.stroke();
    if(i === 0){
      coordinateCtx.lineWidth = 1;
      coordinateCtx.strokeStyle = 'rgba(81, 195, 50, 0.2)';
    }
  };
  for (var i = -len; i < len; i++) {
    coordinateCtx.fillText(i*ca,i*ca,+18);
    if(i !== 0){
      coordinateCtx.fillText(i*ca,15,i*ca + 5);
    }
  }
}
coordinateSystem();//画坐标轴
</script>
</html>